<template>
	<view class="container">
		<u-swiper :list="swiperList" :current='currentSwiperIndex' :autoplay="false" keyName="image" height='355'
			imgMode='aspectFit' @change='handleSwiperChange'>
			<view slot="indicator">
				<view class="indicator">
					<text class="indicator-item" :class="currentSwiperIndex==0?'indicator-item-active':''"
						@click="swiperItemClick(0)">VR</text>
					<text class="indicator-item" :class="currentSwiperIndex==1?'indicator-item-active':''"
						@click="swiperItemClick(1)">视频</text>
					<text class="indicator-item" :class="currentSwiperIndex==2?'indicator-item-active':''"
						@click="swiperItemClick(2)">图片</text>
				</view>
			</view>
		</u-swiper>
		<view class="indicator-num">
			<text class="indicator-num__text">{{ currentSwiperIndex+1 }}/{{ swiperList.length }}</text>
		</view>
		<view class="park-title">
			<text>园区名称</text>
		</view>
		<view class="park-info">
			<view class="park-info-item">
				<text>15</text>
				<text>在租房源数量</text>
			</view>
			<view class="park-info-item">
				<text>543556</text>
				<text>平均月租金(元)</text>
			</view>
			<view class="park-info-item">
				<text>1316546</text>
				<text>建筑面积(m²)</text>
			</view>
		</view>
		<u-tabs :list="tabList" :scrollable='false' :activeStyle="{
            color: '#2489ff',
            fontWeight: 'bold',
        }" lineColor='#2489ff' lineWidth='40' @click='handleTabClick'></u-tabs>
		<Info v-if="currentTab==0" />
		<photo v-if="currentTab==1"></photo>
		<Policy v-if="currentTab==2"></Policy>
		<Dynamic v-if="currentTab==3"></Dynamic>
		<Notice v-if="currentTab==4"></Notice>
		<Eenterprise v-if="currentTab==5"></Eenterprise>
		<view class="house-recommend">
			<view class="house-title">
				房源推荐
			</view>
			<HouseItem></HouseItem>
			<HouseItem></HouseItem>
		</view>


	</view>
</template>

<script>
	import Info from './components/info/info.vue'
	import photo from './components/photo/photo.vue'
	import Policy from './components/policy/policy.vue'
	import Dynamic from './components/dynamic/dynamic.vue'
	import Notice from './components/notice/notice.vue'
	import Eenterprise from './components/enterprise/enterprise.vue'
	import HouseItem from '@/components/HouseItem.vue'
	export default {
		components: {
			Info,
			photo,
			Dynamic,
			Notice,
			Eenterprise,
			HouseItem,
			Policy,
		},
		data() {
			return {
				currentSwiperIndex: 0,
				swiperList: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				tabList: [{
					name: '信息',
				}, {
					name: '相册',
				}, {
					name: '政策'
				}, {
					name: '动态'
				}, {
					name: '公告'
				}, {
					name: '企业'
				}],
				currentTab: 0
			}
		},
		methods: {
			handleSwiperChange(val) {
				this.currentSwiperIndex = val.current
			},
			swiperItemClick(val) {
				this.currentSwiperIndex = val
			},
			handleTabClick(val) {
				this.currentTab = val.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 10px;
	}

	.indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 200upx;

		.indicator-item {
			text-align: center;

			padding: 14upx;
			font-size: 12px;
			width: 128upx;
			border-radius: 30upx;
		}

		.indicator-item-active {
			color: #FFFFFF;
			background-color: rgba(36, 137, 255, .8);
		}
	}

	.indicator-num {
		position: absolute;
		right: 10px;
		transform: translateY(-68upx);
		padding: 10upx 10upx;
		padding-right: 16upx;
		background-color: rgba(0, 0, 0, 0.35);
		border-top-left-radius: 200upx;
		border-bottom-left-radius: 200upx;
		width: 70upx;
		display: flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.park-title {
		text-align: center;
		margin: 20upx 0;

		text {
			font-weight: bold;
			font-size: 20px;
		}
	}

	.park-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30upx 20upx;
		background-color: #2489ff;
		border-radius: 200upx;
		margin-bottom: 60upx;

		&-item {
			display: flex;
			flex-direction: column;
			width: 33%;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 14px;
			border-right: 2px solid #fff;
			align-items: center;
			justify-content: center;

			text {
				padding: 10upx 0;
			}
		}

		&-item:last-child {
			border-right: none;
		}
	}

	.house-recommend {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		padding: 32upx;
		margin-top: 30upx;
		height: 620upx;
		.house-title{
			font-size: 36upx;
			font-weight: bold;
			color: #333444;
			margin-bottom: 15upx;
		}
	}
	
	

	
</style>
